<template>
  <div>
    <h2>x:{{x}},y:{{y}}</h2>
    <hr/>
    <h2 v-if="loading">LOADING...</h2>
    <h2 v-else-if="errorMsg">{{errorMsg}}</h2>
    <img v-if="result" :src="result[0].url" alt="猫" :width="result[0].width" :height="result[0].height" />
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import useMousePosition from "@/hooks/useMousePosition";
import useUrlLoaderT from "@/hooks/useUrlLoaderT";

interface DogResult {
  message: string
  status: string
}
interface CatResult {
  id: string
  url: string
  width: string
  height: string
}
export default defineComponent({
  name: "AxiosLoadT",
  setup(){
    const {x,y} = useMousePosition()
    const {loading,result,errorMsg} = useUrlLoaderT<CatResult>('https://api.thecatapi.com/v1/images/search')
    return {
      x,y,
      loading,result,errorMsg
    }
  }
})
</script>

<style scoped>

</style>
